<template>
	<div style="width:100%;min-height: 200px;"  v-if="activeIndex > 0">
		<content-container style="padding-top: 5.2rem;" :data-page-id="pageName">
			<carousel :list="dataStore[item.type][item.id] || []" :pageName="pageName" :bannerid="item.id" v-for="(item, index) in pageTree.content.HomeCarousel" :key="index + 'meCarousel'"  v-sdrag:real="{id: item.id, com: item.id, dragable: 0, focusShow: true, type: type.HomeCarousel}">
			</carousel>
			<user-card v-for="(item, index) in pageTree.content[type.UserCard]" :key="index + 'meUserCard'" v-sdrag:real="{id: item.id, com: item.id, type: type.UserCard,editable:false}">
			</user-card>
			<erji-category :list="getErjiCategorylist(item.id)" v-for="(item, index) in pageTree.content[type.ErjiCategory]" :key="index + 'meErjiCategory'" v-sdrag:real="{id: item.id, com: item.id, type: type.ErjiCategory}">
			</erji-category>
			<erji-category-content :list="dataStore[item.type][item.id] || []" :erjilistid="item.id" v-for="(item, index) in pageTree.content[type.ErjiCategoryContent]" :key="index + 'meCategoryContent'" v-sdrag:real="{id: item.id, com: item.id, type: type.ErjiCategoryContent}">
			</erji-category-content>

			<new-zone :list="dataStore[item.type][item.id] || []" v-for="(item, index) in pageTree.content[type.NewZone]" :key="index + 'meNewZone'" v-sdrag:real="{id: item.id, com: item.id, type: type.NewZone}">
			</new-zone>
			<product-item-new :list="dataStore[item.type][item.id] || []" v-for="(item, index) in pageTree.content.ProductItemNew" :key="index + 'meProductItemNew'" v-sdrag:real="{id: item.id, com: item.id, type: type.ProductItemNew}">
			</product-item-new>
			<FeaturedGoodsNew :list="dataStore[item.type][item.id] || []" v-for="(item, index) in pageTree.content.FeaturedGoodsNew" :key="index + 'meProductGoodsNew'" v-sdrag:real="{id: item.id, com: item.id, type: type.FeaturedGoodsNew}">
			</FeaturedGoodsNew>
			<FirstClassifyNew :list="dataStore[item.type][item.id] || []" :pageName="pageName" :firstClassifyid="item.id" v-for="(item, index) in pageTree.content.FirstClassifyNew" :key="index + 'meClassifyNew'" v-sdrag:real="{id: item.id, com: item.id, type: type.FirstClassifyNew}">
			</FirstClassifyNew>

			<GuessYouLike v-for="(item, index) in pageTree.content.GuessYouLike"  v-sdrag:real="{id: item.id, com: item.id, type: type.GuessYouLike,editable:false}" :key="index + 'meYouLike'">
			</GuessYouLike>
		</content-container>
		<footer-container>
			<HomeFooter>
			</HomeFooter>
		</footer-container>
	</div>
</template>

<script>
	import TabHead from "../../../real-components/TabHead";
	import HomeCarousel from "../Carousel";
	import ContentContainer from "../../../real-components/ContentContainer";
	import FooterContainer from "../../../real-components/FooterContainer";
	import HeaderContainer from "../../../real-components/HeaderContainer";
	import HomeFooter from "../../../real-components/HomeFooter";
	import { getPageTree, initDomTree } from "../../../utils/getPageTree";
	import { getPageNameOrVirtualPageName } from "../../../utils/getPageName";
	import { mapGetters } from "vuex";
	import UserCard from "../UserCard";
	import NewZone from "../NewZone";
	import ProductItemNew from "../ProductItemNew";
	import FeaturedGoodsNew from "../FeaturedGoodsNew";
	import FirstClassifyNew from "../FirstClassifyNew";
	import GuessYouLike from "../GuessYouLike";
	import ErjiCategory from "../ErjiCategory";
	import ClassifyList from "../ClassifyList";
	import ErjiCategoryContent from "../ErjiCategoryContent";
	//拖拽到此处的提示
	// import DragHere from "../../../style-components/DragHere";
	import axios from "axios";
	export default {
		props: {
			//根据activeIndex去匹配对应的数据
			activeIndex: {
				type: Number,
				default: -1
			},
			titleInfor: {
				type: Array,
				default: []
			}
		},
		data() {
			return {
				type: {
					HomeCarousel: "HomeCarousel",
					UserCard: "UserCard",
					NewZone: "NewZone",
					ProductItemNew: "ProductItemNew",
					FeaturedGoodsNew: "FeaturedGoodsNew",
					FirstClassifyNew: "FirstClassifyNew",
					GuessYouLike: "GuessYouLike",
					ErjiCategory: "ErjiCategory",
					HomeFooter: "HomeFooter",
					ErjiCategoryContent: "ErjiCategoryContent",
				},
				test: [],
				sessionIddata: "",
				storeCodedata: "",
				goodsCodedata: "",
				dataStore: {
					HomeCarousel: {},
					NewZone: {},
					ProductItemNew: {},
					FeaturedGoodsNew: {},
					FirstClassifyNew: {},
					ErjiCategoryContent:{},
				}, //缓存所有数据的对象
				//banner广告数据
				carouseldata: [],
				carouselid: "",
				//二级类目名称配置
				erjiCategory: [],
				erjiCategoryid: "",
				//二级类目内容
				erjiCategoryContent: [],
				erjiCategoryContentid: "",
				//菜单图标（新分类数据）
				productItemNew: [],
				productItemNewid: "",
				//促销活动专区(新的特色商品)
				FeaturedGoodsNew: [],
				FeaturedGoodsNewid: "",
				//新人专区
				NewZone: [],
				NewZoneid: "",
				//新分类推荐
				finalListNew: [],
				finalListNewid: "",
			}
		},
		computed: {
			...mapGetters(["getDomTree"]),
			defaultVirtualDomObject() {
				return {
					header: [],
					content: [],
					footer: []
				}
			},
			pageName() {
				// return "homeselfclassifypage" + this.activeIndex;
				return getPageNameOrVirtualPageName();
			},
			pageTree() {
				// console.log("getPageTree(this, this.pageName)", getPageTree(this, this.pageName));
				return Object.keys(getPageTree(this, this.pageName)).length ? getPageTree(this, this.pageName) : this.defaultVirtualDomObject;
			},
			//content-container里组件的数量
			contentContainerComponentsLength() {
				// return Object.keys(this.pageTree.content).length;
			},
			env() {
				return window.environment;
			}
		},
		methods: {
			getgoodscode(msg) {
				this.goodsCodedata = msg;
			},
			getsessionIddata() {
				this.sessionIddata = localStorage.getItem('sessionId');
				this.storeCodedata = localStorage.getItem('storeCode')
			},
			//轮播图片数据
			queryBanner(id) {
				/*if(this.dataStore.HomeCarousel[id] && !this.dataStore.HomeCarousel[id].length && this.env === 'production') {
					return;
				}*/
				let url = window.api.goods_host + window.api.home_ad;
				let options = {
					method: "get",
					url,
					params: {
						enterpriseCode: api.enterpriseCode,
						storeCode: this.storeCodedata,
						relGroup: id
					},
				}
				axios(options).then(data => {
					if(data.data.data) {
						this.dataStore = Object.assign({}, this.dataStore,
						(this.dataStore[this.type.HomeCarousel][id] = data.data.data[0] ? data.data.data[0][id] : []))
						/*this.dataStore = Object.assign({}, this.dataStore);*/
						//缓存数据到本地
						this.initCache()
					}
				})
			},
			/*getBannerlist(id) {
				this.carouselid = id
				return this.carouseldata[`${id}`]
			},*/
			//二级类目配置
			queryErjiCategory() {
				/*let url = window.api.goods_host + '/resourceConfig/mobile/slc';
				let options = {
					method: "get",
					url,
					params: {
						enterpriseCode: api.enterpriseCode,
						storeCode: this.storeCodedata
					},
				}
				axios(options).then(data => {
					if(data.data.data) {
						this.erjiCategory = data.data.data[0] ? data.data.data[0] : [];
					}
				})*/
			},
			getErjiCategorylist(id) {
				this.erjiCategoryid = id
				return this.erjiCategory[`${id}`]
			},
			//二级类目内容配置
			queryErjiCategoryContent(id) {
				/*if(this.dataStore.ErjiCategoryContent[id] && !this.dataStore.ErjiCategoryContent[id].length && this.env === 'production') {
					return;
				}*/
				let url = window.api.goods_host + '/resourceConfig/mobile/slc_dt';
				let options = {
					method: "get",
					url,
					params: {
						enterpriseCode: api.enterpriseCode,
						storeCode: this.storeCodedata,
						relGroup: id
					},
				}
				axios(options).then(data => {
					if(data.data.data) {
						this.dataStore = Object.assign({}, this.dataStore,
						(this.dataStore[this.type.ErjiCategoryContent][id] = data.data.data[0] ? data.data.data[0][id] : []))
						/*this.dataStore = Object.assign({}, this.dataStore);*/
						//缓存数据到本地
						this.initCache()
					}
				})
			},
			/*getErjiCategoryContentlist(id) {
				this.erjiCategoryContentid = id
				return this.erjiCategoryContent[`${id}`]
			},*/

			//菜单图标（新分类数据）
			queryProductItemNew(id) {
				/*if(this.dataStore.ProductItemNew[id] && !this.dataStore.ProductItemNew[id].length && this.env === 'production') {
					return;
				}*/
				let url = window.api.goods_host + '/resourceConfig/mobile/icon';
				let options = {
					method: "get",
					url,
					params: {
						enterpriseCode: api.enterpriseCode,
						storeCode: this.storeCodedata,
						relGroup: id
					},
				}
				axios(options).then(data => {
					if(data.data.data) {
						this.dataStore = Object.assign({}, this.dataStore,
						(this.dataStore[this.type.ProductItemNew][id] = data.data.data[0] ? data.data.data[0][id] : []))
						//缓存数据到本地
						this.initCache()
					}
				})
			},
			/*getProductItemNewlist(id) {
				this.productItemNewid = id
				return this.productItemNew[`${id}`]
			},*/
			//促销活动专区(新的特色商品)
			queryFeaturedGoodsNew(id) {
				/*if(this.dataStore.FeaturedGoodsNew[id] && !this.dataStore.FeaturedGoodsNew[id].length && this.env === 'production') {
					return;
				}*/
				let url = window.api.goods_host + '/resourceConfig/mobile/pro_act';
				let options = {
					method: "get",
					url,
					params: {
						enterpriseCode: api.enterpriseCode,
						storeCode: this.storeCodedata,
						relGroup: id
					},
				}
				axios(options).then(data => {
					if(data.data.data) {
						this.dataStore = Object.assign({}, this.dataStore,
						(this.dataStore[this.type.FeaturedGoodsNew][id] = data.data.data[0] ? data.data.data[0][id] : []))
					    //缓存数据到本地
						this.initCache()
					}
				})
			},
			/*getFeaturedGoodsNewlist(id) {
				this.FeaturedGoodsNewid = id
				return this.FeaturedGoodsNew[`${id}`]
			},*/
			//新人专区
			queryNewZone(id) {
				/*if(this.dataStore.NewZone[id] && !this.dataStore.NewZone[id].length && this.env === 'production') {
					return;
				}*/
				let url = window.api.goods_host + '/resourceConfig/mobile/newborn';
				let options = {
					method: "get",
					url,
					params: {
						enterpriseCode: api.enterpriseCode,
						storeCode: this.storeCodedata,
						relGroup: id
					},
				}
				axios(options).then(data => {
					if(data.data.data) {
						this.dataStore = Object.assign({}, this.dataStore,
						(this.dataStore[this.type.NewZone][id] = data.data.data[0] ? data.data.data[0][id] : []))
					    //缓存数据到本地
						this.initCache()
					}
				})
			},
			/*getNewZonelist(id) {
				this.NewZoneid = id
				return this.NewZone[`${id}`]
			},*/
			//新分类推荐数据
			queryfinalListNew(id) {
				/*if(this.dataStore.FirstClassifyNew[id] && !this.dataStore.FirstClassifyNew[id].length && this.env === 'production') {
					return;
				}*/
				let url = window.api.goods_host + "/resourceConfig/mobile/new_qc";
				let options = {
					method: "get",
					url,
					params: {
						enterpriseCode: api.enterpriseCode,
						storeCode: this.storeCodedata,
						usePlatform: "wap",
						relGroup: id
					},
				}
				axios(options).then(data => {
					if(data.data.data) {
						this.dataStore = Object.assign({}, this.dataStore,
						(this.dataStore[this.type.FirstClassifyNew][id] = data.data.data[0] ? data.data.data[0][id] : []))
						/*this.dataStore = Object.assign({}, this.dataStore);*/
						//缓存数据到本地
						this.initCache()
					}
				})
	        },
			/*getfinalListNew(id) {
				this.finalListNewid = id
				return this.finalListNew[`${id}`]
			},*/

			inite() {
				PSEvent.listen("changeStoreCode", () => {
					this.getsessionIddata()
					this.initData();
					//this.queryBanner()
					//this.queryErjiCategory()
					//this.queryErjiCategoryContent()
					//this.queryProductItemNew()
					//this.queryFeaturedGoodsNew()
					//this.queryNewZone()
					//this.queryfinalListNew()
				});
				if(this.env === "production") {
					return;
				}
				PSEvent.listen("bannerUpdate", () => {
					//this.queryBanner()
					this.initData();
				});
				PSEvent.listen("erjiCategoryUpdate", () => {
					//this.queryErjiCategory()
					this.initData();
				});
				PSEvent.listen("erjiCategoryContentUpdate", () => {
					//this.queryErjiCategoryContent()
					this.initData();
				});
				PSEvent.listen("productItemNewUpdate", () => {
					//this.queryProductItemNew()
					this.initData();
				});
				PSEvent.listen("featuredGoodsNew", () => {
					//this.queryFeaturedGoodsNew()
					this.initData();
				});
				PSEvent.listen("newZoneUpdate", () => {
					//this.queryNewZone()
					this.initData();
				});
				PSEvent.listen("finalListNewUpdate", () => {
					//this.queryfinalListNew()
					this.initData();
				});
			},
			removeListen() {
				PSEvent.remove("changeStoreCode");
				if(this.env === "production") {
					return;
				}
				PSEvent.remove("bannerUpdate");
				PSEvent.remove("erjiCategoryUpdate");
				PSEvent.remove("erjiCategoryContentUpdate");
				PSEvent.remove("productItemNewUpdate");
				PSEvent.remove("featuredGoodsNew");
				PSEvent.remove("newZoneUpdate");
				PSEvent.remove("finalListNewUpdate");
			},
			//初始化页面数据
            initData() {
            	//只有切换到了分类页才会加载对应分类页面的数据
            	if(this.pageName === "home") {
					return
				}
				//第一步拿到所有的id
				let requestData = [];
				for(let key in this.pageTree.content) {
					this.pageTree.content[key].forEach((item) => {
						requestData.push({
							id: item.id,
							type: item.type,
							state: 1
						});
					});
				}
				requestData.forEach(item => {
					this.startQueryData(item);
				});
			},
			//开始根据type和id值去请求对应的数据
			startQueryData(component) {
				switch(component.type) {
					case this.type.HomeCarousel:
						this.queryBanner(component.id);
						break;
					case this.type.ProductItemNew:
						this.queryProductItemNew(component.id);
						break;
					case this.type.FeaturedGoodsNew:
						this.queryFeaturedGoodsNew(component.id);
						break;
					case this.type.FirstClassifyNew:
						this.queryfinalListNew(component.id);
						break;
					case this.type.NewZone:
						this.queryNewZone(component.id);
						break;
					case this.type.ErjiCategoryContent:
						this.queryErjiCategoryContent(component.id);
						break;	
					default:
						break;
				}
			},
			//把首页分类切换数据缓存到本地
			initCache() {
				sessionStorage.setItem(this.pageName, JSON.stringify(this.dataStore));
			},
			//根据本地是否有缓存来决定去请求接口与否
			loadData() {
				if(sessionStorage.getItem(this.pageName) && this.env == 'production') {
					this.dataStore = JSON.parse(sessionStorage.getItem(this.pageName));
				} else {
					this.initData();
				}
			},
			
			//设置虚拟页面的名称
			setVirtualPageNameForVuex() {
				if(this.activeIndex < 1) {
					//销毁虚拟页面
					this.$store.commit("gw/setVirtualPageName", "")
					// this.$store.commit("setFirstInitDom", {
					// 	header: "home-header",
					// 	footer: "home-footer",
					// 	content: "home-content",
					// });
				} else {
					//设置对应的虚拟页面
					// this.$store.commit("setFirstInitDom", {
					// 	header: "selfclassifypage" + this.activeIndex + "-header",
					// 	footer: "selfclassifypage" + this.activeIndex + "-footer",
					// 	content: "selfclassifypage" + this.activeIndex + "-content",
					// });
					this.$store.commit("gw/setVirtualPageName", "selfclassifypage" + this.activeIndex);
				}
			},
			//销毁虚拟页面
			clearVirtualPageNameForVuex() {
				this.$store.commit("gw/setVirtualPageName", "")
				// this.$store.commit("setFirstInitDom", {
				// 	header: "",
				// 	footer: "",
				// 	content: "",
				// });
			}
		},
		components: {
			"carousel": HomeCarousel,
			"content-container": ContentContainer,
			"header-container": HeaderContainer,
			"tab-head": TabHead,
			"user-card": UserCard,
			"erji-category": ErjiCategory,
			"erji-category-content": ErjiCategoryContent,
			ClassifyList,
			"new-zone": NewZone,
			ProductItemNew,
			FeaturedGoodsNew,
			FirstClassifyNew,
			GuessYouLike,
			HomeFooter,
			FooterContainer,
			
		},
		created() {
			
		},
		mounted() {
			this.setVirtualPageNameForVuex();
			//使用这个是为了兼容处理首页
			if(this.activeIndex > 0) {
				initDomTree(this.getDomTree[this.pageName], {
					content: `div[data-page-id=${this.pageName}]`
				});
			}
			this.inite()
			this.getsessionIddata();
			this.loadData();
			PSEvent.listen(this.pageName, ()=>{
				this.initData();
			})
			//this.queryBanner()
			//this.queryErjiCategory()
			//this.queryErjiCategoryContent()
			//this.queryProductItemNew()
			//this.queryFeaturedGoodsNew()
			//this.queryNewZone()
			//this.queryfinalListNew()
		},
		beforeDestroy() {
			this.removeListen()
			//销毁虚拟页面
			// console.log("beforeDestroy");
			// console.log()
			this.clearVirtualPageNameForVuex();
		},
		updated() {
			if(this.activeIndex > 0 && this.env === "edit") {
				initDomTree(this.getDomTree[this.pageName], {
					content: `div[data-page-id=${this.pageName}]`
				});
			}
		},
		watch: {
			//banner广告
			/*carouseldata() {
				this.getBannerlist(this.carouselid)
			},
			//二级分类名称配置
			erjiCategory() {
				this.getErjiCategorylist(this.erjiCategoryid)
			},
			//二级分类内容配置
			erjiCategoryContent() {
				this.getErjiCategoryContentlist(this.erjiCategoryContentid)
			},
			//菜单图标（新分类数据）
			productItemNew() {
				this.getProductItemNewlist(this.productItemNewid)
			},
			//促销活动专区(新的特色商品)
			FeaturedGoodsNew() {
				this.getProductItemNewlist(this.FeaturedGoodsNewid)
			},
			//新人专区
			NewZone() {
				this.getNewZonelist(this.NewZoneid)
			},
			//新分类推荐数据
			finalListNew(data) {
				if(data) {
					this.getfinalListNew(this.finalListNewid)
				}
			},*/
		}
	}
</script>

<style>

</style>